<template>
<el-card v-loading="isLoading">
  <el-form>
    <el-form-item>
      <template #label>
        <strong>是否开启客服页面</strong>
      </template>
      <el-switch v-model="form.state" :loading="isLoading" :before-change="changeSwitch" :active-value="1" :inactive-value="0"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-upload
        name="file"
        :headers="uploadHeader"
        :action="uploadUrl"
        :data="{path:'custom_service_code'}"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <div style="text-align: center">
          <img v-if="form.code" :src="form.code" class="avatar">
          <img v-else src="/admin-img/set_custom_service/code.png" alt="">
          <div>
            <i class="el-icon-upload" style="font-size: 18px;vertical-align: middle;color: #666!important;margin-right: 5px;"></i>
            <span style="color: #666!important;">上传您的QQ或微信二维码</span>
          </div>
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <template #label>
        <strong>备注</strong>
      </template>
      <el-input size="small" style="max-width: 200px;" placeholder="二维码下方备注" v-model="form.name"></el-input>
      <el-button size="small" type="primary" style="margin-left: 5px;" @click="editFun('name')">保存</el-button>
    </el-form-item>
  </el-form>
</el-card>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'
import baseUrl from '../../../axios/baseUrl'
import { edit_customer_service, get_customer_service } from '../../../axios/adminRequest'

export default {
  name: 'setCustomerService',
  setup(){
    let { proxy } = getCurrentInstance()
    const state =reactive({
      uploadUrl:baseUrl + '/upload',
      uploadHeader:{
        'admin-token':localStorage.getItem('adminAccessKey')
      },
      isLoading:true,
      form:{
        id:'',
        code:'',
        state:'',
        name:''
      }
    })


    const getInfo = () => {
      state.isLoading = true
      get_customer_service().then(data=>{
        if(data.code == 0){
          state.form.id = data.data.id
          state.form.name = data.data.name
          state.form.state = data.data.state
          state.form.code = data.data.code
        }else{
          proxy.$message.error(data.msg)
        }
        state.isLoading = false
      })
    }
    getInfo()

    // 上传头像的方法
    const handleAvatarSuccess = (response, file, fileList) => {
      if(response.code == 0){
        editFun('code',()=>{
          state.form.code = baseUrl +'/' + response.data.path
        })
      }else{
        proxy.$message.error(response.msg)
      }
    }

    // 修改客服开关的方法
    const changeSwitch = () => {
      return new Promise((resolve,reject) =>{
        editFun('state',(result)=>{
          if(result){
            resolve(true)
          }else{
            reject()
          }
        })
      })
    }

    const editFun = (type,callBack) => {
      state.isLoading = true
      edit_customer_service(state.form.id,{[type]:state.form[type]}).then(res=>{
        if(res.code == 0){
          proxy.$message.success('保存成功')
        }else{
          proxy.$message.error(res.msg)
        }
        if(callBack){
          callBack(res.code == 0)
        }
        state.isLoading = false
      })
    }

    return{
      handleAvatarSuccess,
      changeSwitch,
      editFun,
      ...toRefs(state)
    }
  }
}
</script>

<style lang="less" scoped>
.avatar{
  width: 100px;
  height: 100px;
}
</style>
